<template>
  <view class="content ss-p-20">
    <x-nav-bar title="陪伴" />
    <!-- <view class="stu-box">
      <view>请选择学生:</view>
      <view class="stu-list ss-flex">
        <view class="stu-item" :class="{act: studentId == item.id}" v-for="item in studentData" :key="item.id"
          @click="changeStudent(item)">{{item.name}}
        </view>
      </view>
    </view> -->
    <uni-easyinput type="textarea" v-model="sendData.content" :inputBorder="false" placeholder="写写你发现的进步和感动的地方" />
    <view class="ss-flex">
      <view class="img-list ss-flex ss-flex-wrap">
        <template v-if="sendData.filePath.path && sendData.filePath.path.length && isImage">
          <su-image v-for="(item,index) in sendData.filePath.path" :key="index" class="ss-m-r-10 ss-m-b-10" isPreview
            :current="0" :src="item" :height="200" :width="200" mode="aspectFill" />
        </template>
        <template v-else-if="sendData.filePath.path && sendData.filePath.path.length && !isImage">
          <video id="myVideo" class="ss-m-r-10 ss-m-b-10" :src="sendData.filePath.path[0]" :controls="false"></video>
        </template>
        <view class="add ss-m-r-10 ss-m-b-10" @tap="chooseVideoImage">
          <uni-icons type="plusempty" size="48" color="#fff"></uni-icons>
        </view>
      </view>
    </view>

    <su-fixed bottom placeholder bg="bg-white">
      <view class="buy-btn" @click="publish">发表</view>
    </su-fixed>
  </view>

</template>

<script setup>
  import {
    ref,
    reactive,
    computed,
    onMounted
  } from 'vue';
  import FileApi from '@/sheep/api/infra/file';
  import sheep from '@/sheep';
  import AccompanyApi from '@/sheep/api/member/accompany';
  import StudentApi from '@/sheep/api/member/student';
  let studentData = reactive([])
  let studentId = ref(0)
  let isImage = ref(true)
  // 获取学生列表
  const getStudentList = () => {
    StudentApi.getStudentPage({
      pageSize: 99,
      pageNo: 1
    }).then(res => {
      if (res.code == 0 && res.data?.list?.length) {
        studentData.splice(0, studentData.length)
        studentId.value = res.data.list[0].id
        sendData.studentId = res.data.list[0].id
        studentData.push(...res.data.list)
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg,
        })
      }
    })
  }
  onMounted(() => {
    getStudentList()
  })

  const chooseVideoImage = () => {
    uni.showActionSheet({
      title: "选择上传类型",
      itemList: ['图片', '视频'],
      success: (res) => {
        if (res.tapIndex == 0) {
          chooseImages()
          isImage.value = true
        } else {
          chooseVideo()
          isImage.value = false
        }
      }
    })
  }
  const userInfo = computed(() => sheep.$store('user').userInfo);
  let sendData = reactive({
    type: 2, // |发布人类型 1家长；2主理人；3陪伴师
    studentId: '',
    content: '',
    filePath: { // |文件地址(json字符串)；type=1图片、2视频|query|false|string||
      type: 1,
      path: [],
    },
    model: 1 // 1 陪伴，2 成长
  })
  // mgrType 管理员类型：1主理人，2陪伴师，3管理员
  if (userInfo.value.mgrType == 2) {
    sendData.type = 3
  }
  let fileList = reactive([])
  // 发布朋友圈
  const publish = () => {
    if (!sendData.studentId) {
      uni.showToast({
        icon: 'none',
        title: '请选择发布的学生',
      })
      return
    }
    if (!sendData.content && sendData.filePath.path.length == 0) {
      uni.showToast({
        icon: 'none',
        title: '请输入发布内容',
      })
      return
    }
    if (!isImage.value) {
      sendData.filePath.type = 2
    }
    sendData.filePath = JSON.stringify(sendData.filePath)
    AccompanyApi.addAccompany(sendData).then(res => {
      if (res.code == 0) {
        uni.showToast({
          icon: 'none',
          title: '发布成功',
        })
        sheep.$router.back()
      } else {
        uni.showToast({
          icon: 'none',
          title: res.msg,
        })
      }
    })
  }
  // 选择学生
  const changeStudent = (item) => {
    sendData.studentId = item.id
    studentId.value = item.id
  }
  // 手动选择头像，进行上传
  const chooseImages = () => {
    // 选择图片文件
    uni.chooseImage({
      count: 9,
      sizeType: ['compressed'],
      success: async (res) => {
        await uploadAvatar(res.tempFilePaths[0]);
      },
    });
  }
  const chooseVideo = () => {
    uni.chooseVideo({
      sourceType: ['camera', 'album'],
      count: 1,
      maxDuration: 60,
      success: async (res) => {
        await uploadAvatar(res.tempFilePath);
      }
    });
  }
  // 上传头像文件
  const uploadAvatar = async (tempUrl) => {
    if (!tempUrl) return
    let {
      data
    } = await FileApi.uploadFile(tempUrl);
    sendData.filePath.path.push(data)
  }
</script>

<style lang="scss" scoped>
  .content {
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    min-height: 100%;
    width: 100vw;

    .stu-box {
      .stu-list {
        padding: 16rpx 0;

        .stu-item {
          text-align: center;
          background: #f4f4f4;
          border-radius: 30rpx;
          color: #434343;
          font-size: 26rpx;
          margin-right: 10rpx;
          padding: 12rpx 30rpx;

          &.act {
            color: #fff;
            background: linear-gradient(90deg, #ff3000, #ff300099)
          }
        }
      }

    }

    .img-list {
      font-size: 0;

      #myVideo,
      image {
        width: 200rpx;
        height: 200rpx;
      }

      video {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

    }

    .add {
      background: #eee;
      width: 200rpx;
      height: 200rpx;
      line-height: 200rpx;
      text-align: center;
    }
  }



  .buy-btn {
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-weight: 500;
    font-size: 28rpx;
    background: linear-gradient(90deg, #ff3000, #ff300099);
    color: #fff;
    text-align: center;
  }
</style>